<template>
  <view class="p-top-countdown">
    <view class="left">
      <view class="title">{{ topBar.title || '好物推荐' }}</view>
      <view class="subtitle">{{ topBar.subtitle || '爆款热销，正品保障' }}</view>
    </view>
    <view class="right">
      <view>距结束</view>
      <view class="ul countdown">
        <view class="li">{{countdownData.hour}}</view>
        <view class="delimiter">:</view>
        <view class="li">{{countdownData.minute}}</view>
        <view class="delimiter">:</view>
        <view class="li">{{countdownData.second}}</view>
        <x-countdown
          v-if="showCountdown"
          :time="time"
          auto
          @change="handleCountdownChange"
        />
      </view>
    </view>
  </view>
</template>

<script>
import XCountdown from '@/components/x-countdown';
import { mapState } from 'vuex';
export default {
  name: 'PTopCountdown',
  components: {
    XCountdown
  },
  props: {
    remaining: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      showCountdown: true,
      countdownData: {}
    };
  },
  computed: {
    time() {
      return this.remaining ? this.remaining * 1000 : 0;
    },
    ...mapState({
      topBar: state => state['product'].pageModule?.topBar || {}
    })
  },
  watch: {},
  created() {

  },
  methods: {
    handleCountdownChange(res) {
      this.countdownData = res;
      if (res.remain === 0) {
        this.showCountdown = false;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.p-top-countdown{
  display: flex;
  align-items: center;
  border-radius: 40px 40px 0 0;
  overflow: hidden;
  height: 132px;
  margin-bottom: -44px;
  padding: 0 var(--padding) 44px var(--padding);
  background: cdn('/images/top-banner-bg.jpg') no-repeat;
  background-size: cover;
  .left{
    display: flex;
    flex:1;
    align-items: baseline;
    color: #FFFFFF;
    .title{
      font-size: 32px;
    }
    .subtitle{
      margin-left: 14px;
      font-size: 24px;
    }
  }

  .right{
    display: flex;
    align-items: center;
    width: 245px;
    font-size: 22px;
    color: #DE3A2E;
  }

  .countdown{
    display: flex;
    justify-content: flex-end;
    margin-left: 10px;
    font-size: 26px;
    color: #2D2A22;
    .li{
      width: 35px;
      height: 35px;
      background: #2D2A22;
      color: #FFFFFF;
      border-radius: 8px;
      text-align: center;
      &:nth-child(5){
        position: relative;
        .millisecond{
          width: 100%;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          filter: brightness(100);
        }
      }
    }
    .delimiter{
      margin: 0 8px;
    }
  }
}
</style>
